Ext.define('Atman.controller.Dashboard5', {
    extend: 'Ext.app.Controller',

    config: {
        refs: {
            dashboard:{
                selector:'#dashboardview5',
                xtype:'dashboardview5',
                autoCreate:true
            },
            dashboardMain:{
                selector:'#dashboardmain5',
                xtype:'dashboardmain5',
                autoCreate:true
            },
            dashboardSub:{
                selector:'#dashboardsub5',
                xtype:'dashboardsub5',
                autoCreate:true
            },
            btnPrev:'#btnprev5',
            btnNext:'#btnnext5'
        },
        control:{
            dashboardMain:{
                initialize:'applyDashboardMain'
            },
            dashboardSub:{
                initialize:'applyDashboardSub'
            },
            btnPrev:{
                tap:'prev'
            },
            btnNext:{
                tap:'next'
            }
        }
    },
    prev:function(){
        this.getDashboardMain().previous();
/*
        if(this.getDashboardMain().getActiveIndex() === 0){
            this.getDashboardMain().animateActiveItem(this.getDashboardMain().getMaxItemIndex());
        }
*/
    },
    next:function(){
        this.getDashboardMain().next();
        /*
        if(this.getDashboardMain().getActiveIndex() === this.getDashboardMain().getMaxItemIndex()){
            this.getDashboardMain().animateActiveItem(0);
        }
        */
    },
    /* Version : 1 */
    applyDashboardMain:function(){
        var panel = this.getDashboardMain();
        var arrPanels = [];
        var arrTitles = ['수익지표','비용지표','생산성지표'];

        var arrSubPanels = [];
        Ext.define('unitDashboard',{
            extend:'Ext.Panel',
            xtype:'unitdashboard',
            config:{
                flex: 1,
                margin: '0px 5px 0px 5px',
                layout: {type:'fit'},
                style:'border-radius: 5px;background-color:yellow;',
                items:[{
                    xtype:'titlebar',
                    docked:'top',
                    title:'타이틀',
                    style:'border-radius: 5px 5px 0px 0px;'
                }],
                html:'<table width="100%" height="100%" align="center">' +
                    '<tr><td width="50%">' +
                    '<table><tr><td valign="bottom">계획 : 3,408</td></tr><tr><td valign="top">실적 : 4,731</td></tr></table></td>' +
                    '<td width="50%"><table><tr height="10%"><td>달성률</td></tr>' +
                    '<tr height="80%"><td><img src="resources/icons/arrow_up.png" width="100" height="100"/></td></tr>' +
                    '<tr height="10%"><td>139%</td></tr></table>' +
                    '</td></tr></table>'
            }
        });
        for(var i=0;i<3;i++){
            arrSubPanels.push({xtype:'unitdashboard'});
        }

        for(var i=0;i<3;i++){
            var subPanel = Ext.create('Ext.Panel',{
                layout:'fit',
                items:[{
                    xtype:'carousel',
                    fullscreen: true,
                    direction: 'vertical',
                    defaults: {
                        styleHtmlContent: true
                    },

                    items: [{
                            xtype:'titlebar',
                            title: arrTitles[i],
                            margin:'10px',
                            style:'border-radius: 5px;',
                            docked:'top',
                            items:[{
                                text:'▼',
                                align:'right',
                                listeners:[{
                                    event:'tap',
                                    fn:function(){
                                        this.up().up().up().next();
                                    }
                                }]
                            },{
                                text:'▲',
                                align:'right',
                                listeners:[{
                                    event:'tap',
                                    fn:function(){
                                        this.up().up().up().previous();
                                    }
                                }]
                            }]
                        },
                        {
                            layout:'hbox',
                            items:arrSubPanels
                        },
                        {
                            layout:'hbox',
                            items:arrSubPanels
                        },
                        {
                            layout:'hbox',
                            items:arrSubPanels
                        }
                    ]
                }]
            });
            arrPanels.push(subPanel);
        }
        panel.add(arrPanels);
    },
    applyDashboardSub:function(){
        var panel = this.getDashboardSub();
        var arrChartType = ['area','bar'];
        var arrPanels = [];

        for(var i=0;i<2;i++){
            var getChart = Ext.create('Ext.chart.Chart',{
                animate: true,
                store: {
                    fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
                    data: [
                        {'name':'metric one', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                        {'name':'metric two', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                        {'name':'metric three', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                        {'name':'metric four', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())},
                        {'name':'metric five', 'data1':Math.ceil(100*Math.random()), 'data2':Math.ceil(100*Math.random()), 'data3':Math.ceil(100*Math.random()), 'data4':Math.ceil(100*Math.random()), 'data5':Math.ceil(100*Math.random())}
                    ]
                },
                legend: {
                    position: 'top'
                },
                axes: [{
                    type: 'numeric',
                    position: 'left',
                    fields: ['data1'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    },
                    grid: true,
                    minimum: 0
                }, {
                    type: 'category',
                    position: 'bottom',
                    fields: ['name'],
                    title: {
                        text: 'Sample Values',
                        fontSize: 15
                    }
                }],
                series: [{
                    type: arrChartType[i],
                    title: ['Data1', 'Data2', 'Data3'],
                    subStyle: {
                        fill: ['blue', 'green', 'red']
                    },
                    xField: 'name',
                    yField: ['data1', 'data2', 'data3']
                }]
            });
            var subPanel = Ext.create('Ext.Panel',{
                flex:1,
                layout:'fit',
                items:getChart
            });
            arrPanels.push(subPanel);
        }
        panel.add(arrPanels);
    }
});